<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../public/lib/vue.js"></script>
    <script src="../public/lib/vue-router.js"></script>
    <script src="../public/lib/vue-resource.js"></script>
</head>

<body style="width: 100%; height: 100%;margin: 0">
    <div style="width: 100%; height: 100%;margin: 0" id="game">
        <!-- 标题div -->
        <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(10% - 2px);">
            <div style="border: 1px solid #999;width: calc(30% - 2px);height: calc(40% - 2px);
            margin-left: 35%;margin-top: 3%;">{{roomCodeStr}}{{roomCode}}
            </div>
            <div style="border: 1px solid #999;width: calc(30% - 2px);height: calc(30% - 2px);
            margin-left: 35%;text-align: center;">({{statusStr}})
            </div>
        </div>

        <!-- 房间人数div -->
        <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(10% - 2px);">
            <!-- 房间人数div -->
            <div style="border: 1px solid #999;width: calc(60% - 2px);height: calc(100% - 2px);float: left;">
                房间人数/当前人数：10/7
            </div>
            <div style="border: 1px solid #999;width: calc(40% - 2px);height: calc(100% - 2px);float: left;">
                <button v-on:click="updateRoom(statusGaming)">{{gameOpBtn}}</button>
            </div>
        </div>

        <!-- 成员div websocket -->
        <!-- 将其转换为块级标签再居中 -->
        <!-- <button style="display: block;margin: 0 auto;">展开</button> -->
        <div style="width: calc(100% - 2px);height: calc(15% - 2px);background-color: greenyellow;">
            <com-btn></com-btn>
        </div>
        
        <!-- 事件 / 身份div -->
        <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(35% - 2px);">
            <!-- 事件div -->
            <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(100% - 2px);" v-if="isMaster">
                &nbsp;<br>
                事件<br>
                事件<br>
                事件<br>
                事件<br>
                事件<br>

                事件<br>
                事件<br>
                事件<br>
                事件<br>

                事件<br>
                事件<br>
                事件<br>

                事件<br>
                事件<br>

                事件<br>
                事件<br>
                事件<br>

                事件<br>
                事件<br>
                事件<br>
                事件<br>

                事件<br>
                事件<br>
                事件<br>

                事件<br>
                事件<br>

                事件<br>
                aaaa<br>
                aaaa<br>
                aaaa<br>
                aaaa<br>
                aaaa<br>
                aaaa<br>
                aaaa<br>
                aaaa<br>

            </div>

            <!-- 身份div -->
            <div style="border: 1px solid #999;width: calc(100% - 2px);height: calc(100% - 2px);" v-if="!isMaster">
                身份
            </div>
            
        </div>

        <!-- 按钮div -->
        <div
            style="border: 1px solid #999;width: calc(100% - 2px);height: calc(12% - 2px);position:fixed; left:0px; bottom:0px;">
            <!-- 开始游戏 -->
            <div style="border: 1px solid #999;width: calc(50% - 2px);height: calc(100% - 2px);float: left;">
                <button>重新开始</button>
            </div>
            <!-- 退出房间 -->
            <div style="border: 1px solid #999;width: calc(50% - 2px);height: calc(100% - 2px);float: left;">
                <button>退出房间</button>
            </div>
        </div>
    </div>
    <script src="../js/game.js"></script>
</body>

</html>